<template>
  <div class="msg">
    <img src="../assets/勾.svg" alt="" class="img" />
    <ul :style="{width:'200px',}">
      <li v-for="(item,index) in items" 
      :key="index">{{NewItem}}</li>
    </ul>
    <img src="../assets/叉.svg" alt="" class="msg-img" />
  </div>
</template>
<script>
export default {
  name: "missions",
  data() {
    return {
      NewItem:'',
      items:[],
    };
  },
  methods: {
    onSubmit() {
      console.log("ipt");
        this.items.push({
            label:this.NewItem,
        });
        this.NewItem =""
    },
  },
};
</script>
<style>
.msg {
  margin-top: 20px;
  width: 650px;
  height: 40px;
  font-size: 30px;
  border-radius: 10px;
  text-indent: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  outline: none;
  margin-left: 10px;
  border: 1px solid;
  cursor:pointer;
  &-ipt {
    border: none;
  }
}
.msg-img {
  width: 30px;
  height: 30px;
  /* display:none; */
}
.msg-img:hover {
  display: flex;
}
.img {
  width: 40px;
  height: 40px;
  background-color: block;
}
</style>
